<template>
    <view class="login-page">
        <image class="login-page__bg" src="/static/images/bg/login.png" mode=""></image>
        <view class="login-page__input-group">
            <input class="login-page__input" type="text" v-model="username" placeholder="请输入姓名" />
            <input class="login-page__input" type="text" v-model="student_number" placeholder="请输入学号" />
        </view>
        <image class="login-page__btn" src="/static/images/btn/login.png" mode="" @click="onClickLogin"></image>
    </view>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            student_number: '',
        };
    },
    methods: {
        onClickLogin() {
            if (!this.username) {
                uni.showToast({ title: '请输入姓名', icon: 'none' });
                return;
            }
            if (!this.student_number) {
                uni.showToast({ title: '请输入学号', icon: 'none' });
                return;
            }
            this.$store.commit('saveUser', {
                username: this.username,
                student_number: this.student_number,
            });
            // 页面跳转
            uni.navigateTo({
                url: `../time/time?data=${this.$store.getters.data}`,
            });
        }
    }
};
</script>

<style lang="scss">
.login-page {
    &__bg {
        width: 100vw;
        height: imageSize(100vw, 750, 1624);
    }
    &__input-group {
        width: 65vw;
        height: 30vw;
        position: absolute;
        top: 142vw;
        left: 20vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    &__btn {
        width: 50vw;
        height: imageSize(50vw, 338, 84);
        position: absolute;
        top: 185vw;
        left: 25vw;
    }
}
</style>
